<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 800 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      const g = svg.append('g').attr('transform','translate(50,50)');

      let data ;
      let root ;
      let c ;
      (async function(){
        data = await d3.json('data/china_province_city.json')   
          
        root = d3.hierarchy(data,d=>d.area);

        root.sum(d=>+d.population).sort((n1,n2)=>n1.value-n2.value)

        const c = d3.scaleOrdinal()
          .domain(root.children.map(d=>d.data.name))
          .range(d3.schemeSet3)
        
        const map = d3.treemap()
          .size([width-100,height-100])
          .padding(1)

        map(root);  


        g.selectAll('rect')
          .data(root.leaves())
          .join('rect')
          .attr('x',d=>d.x0)
          .attr('y',d=>d.y0)
          .attr('width',d=>d.x1-d.x0)
          .attr('height',d=>d.y1-d.y0)
          .attr('fill',d=>c(d.ancestors().reverse()[1].data.name))
          //.attr('stroke','#ccc')

        g.selectAll('text')
          .data(root.leaves())
          .join('text')
          .attr('x',d=>(d.x0+d.x1)/2)
          .attr('y',d=>(d.y0+d.y1)/2)
          .attr('text-anchor','middle')
          .attr('dominant-baseline','middle')
          .attr('font-size',12)
          .text(d=>d.data.name)
          
      })();

      
      
    </script>
  </body>
</html>
